<template>
    <div class="hello">
        <swiper :modules="modules" :pagination="{ clickable: true }">
            <swiper-slide v-for="(item, index) in imgUrl" :key="index">
                <img :src="item" alt="">
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
import { Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';

export default {
    name: "MySwiper",
    data() {
        return {
            modules: [Pagination],
            imgUrl: [require("../assets/1.png"), require("../assets/2.png"), require("../assets/3.png")]
        }
    },
    components: {
        Swiper,
        SwiperSlide,
    },

}
</script>

<style scoped>
img {
    width: 50%;
    height: 50%;
}
</style>